<template>
    <div>
       <video loop muted autoplay src="../assets/video/top.mp4" class="video"
       style="height: 100%;transform: translate(36px,-50px);"></video>
    </div>
</template>
<script>
export default ({
    mounted(){
        const shell = document.querySelector(".shell")
        const video = document.querySelector(".video")
        shell.addEventListener('mouseenter', function (e) {
            this.x = e.clientX
            video.style.transition = 'none'
        })
        shell.addEventListener('mousemove', function (e) {
            this._x = e.clientX
            const disx = this._x - this.x
            const move = 36 - disx / -20
            video.style.transform = `translate(${move}px,-8px)`
        })
        shell.addEventListener('mouseleave', function (e) {
            // video.style.transition = .3 +'s'
            video.style.transition = 'transform 0.3s'
            video.style.transform = 'translate(36px,-8px)'
        })
}
})

</script>
<style scoped>
   * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 100%;
            display: flex;
            justify-content: center;
            overflow: hidden;
           background-color: aliceblue;
           margin-bottom: -50px;
        }

        .shell {
            width: 100%;
            height: 162px;
            display: flex;
            justify-content: center;
        }
</style>